<style type="text/css">

    .container {
        margin: 100px auto;
    }

    .text404 {
        width: 45%;
        float: right;
        text-align: left;
        -ms-transform:matrix(0.866,0.2,-0.2,0.866,0,0); /* IE 9 */
        -webkit-transform:matrix(0.866,0.2,-0.2,0.866,0,0); /* Chrome, Safari, Opera */
        transform:matrix(0.866,0.2,-0.2,0.866,0,0);
    }

    .pic404 {
        width: 50%;
        position: relative;
    }

    .pic404 img {
        float: right;
        -ms-transform: matrix(0.866, -0.2, 0.2, 0.866, 0, 0); /* IE 9 */
        -webkit-transform: matrix(0.866, -0.2, 0.2, 0.866, 0, 0); /* Chrome, Safari, Opera */
        transform: matrix(0.866, -0.2, 0.2, 0.866, 0, 0);
    }

    h1{
        font-size: 4em;
    }

    h3{
        font-size: 2em;
    }

    @media (max-width: 767px) {
        h1{
            font-size: 2em;
        }
        h3{
            font-size: 1em;
        }
    }

</style>

<div class="container">
    <a href="/">
    <div class="text404">
        <h3>Oops! Something went wrong.</h3>

        <h1>404</h1>

        <div class="has-error">
            <i>PAGE NOT FOUND</i>
        </div>
    </div>
    <div class="pic404">
        <img style="width: 20%" src="../css/images/crack-line.jpg">
        <img style="width: 70%" src="../css/images/404.jpg">
    </div>
    </a>
</div>